<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>账户中心</title>
    <link rel="stylesheet" href="../css/templet.min.css">
    <link rel="stylesheet" href="../utill/bootstrap.min.css">
    <link rel="stylesheet" href="../css/user.css">
    <link rel="shortcut icon" href="../img/g10.ico" type="image/x-icon">
    <script src="../utill/jquery-3.5.1.min.js"></script>
    <script src="../utill/bootstrap.bundle.min.js"></script>

</head>

<body>
    <!-- 顶部 -->
    <div class="header">
        <div class="nav">
            <img class="logo" src="../img/img-templet/logo.png " alt="">
            <div class="position"><a href="">北京<img src="../img/img-templet/logo-bottom.png" alt=""></a></div>
            <ul class="type">
                <li><a href="">北京站</a></li>
                <li><a href="">演唱会</a></li>
                <li><a href="">音乐会</a></li>
                <li><a href="">话剧歌剧</a></li>
                <li><a href="">体育</a></li>
            </ul>
            <input type="text" placeholder="请输入演出、赛事、艺人、场馆名称...">
            <button><img src="../img/img-templet/search.png" alt=""></button>
            <ul class="login">
                <li><a href="login.html">登录</a></li>
                <li><a href="resigter.html">注册</a></li>
            </ul>
        </div>
    </div>


    <!-- <div id="blank"></div> -->


    <!-- 左侧侧边栏用户列表 -->
    <div class="big-box-1">
        <!-- 头部导航 -->
        <div class="container-title">
            <div><a href="./index1.html">首页</a></div>
            <div>></div>
            <div><a href="#">个人中心</a></div>
            <div>></div>
            <div><a href="#">我的订单</a></div>
        </div>
        <div class="content">
            <div class="box">
                <!-- 左侧边固定栏 用户图片 -->
                <div class="box1">
                    <div class="wddm">
                        <div>
                            <a href="">我的大觅</a>
                        </div>
                    </div>
                    <!-- 切换列表 -->
                    <ul class="user-list nav flex-column" id="myTab" role="tablist">
                        <li class="box22"><span>交易中心</span></li>
                        <li class="box333">
                            <a class="active" id="" data-toggle="tab" href="#dingdan">订单管理</a>
                        </li>
                        <li class="box22"><span>账号中心</span></li>
                        <li class="box333">
                            <a class="" id="" data-toggle="tab" href="#gerenxx">个人信息</a>
                        </li>
                        <li class="box333">
                            <a class="" id="" data-toggle="tab" href="#changyong">常用购票人</a>
                        </li>

                    </ul>

                </div>
                <!-- 换页的内容 -->
                <div class="box2">
                    <!-- <div class="box2-title"></div> -->
                    <div class="tab-content " id="myTabContent">

                        <!-- 订单管理 -->
                        <div class="tab-pane fade active show" id="dingdan">
                            <!-- 头部订单菜单导航 -->
                            <div class="top-fst">
                                <span>订单管理</span>
                            </div>
                            <div class="bot-fst">
                                <div class="caidandaohang">
                                    <a href="">近期订单列表</a>
                                </div>
                            </div>
                            <div class="dd-list">
                                <div class="list-item1">
                                    <select name="" class="list-item-val1">
                                        <option value="" selected>全部订单</option>
                                        <option value="">部分订单</option>
                                    </select>
                                </div>
                                <div class="list-item2">
                                    <select name="" class="list-item-val2">
                                        <option value="" selected>近三个月订单</option>
                                        <option value="">近半年订单</option>
                                        <option value="">近一年订单</option>
                                    </select>
                                </div>
                            </div>
                            <!-- 订单列表区 -->
                            <div class="dd-list2">
                                <table id="goods">
                                    <tr class="fstr">
                                        <td>项目名称</td>
                                        <td>票价</td>
                                        <td>数量</td>
                                        <td>售后</td>
                                        <td>订单金额</td>
                                        <td>交易状态</td>
                                        <td>操作</td>
                                    </tr>
                                    <!-- <tr class="hebing">
                                        <td colspan="7">
                                            订单号：1050348163 成交时间：2017-11-24 10:27
                                        </td>
                                    </tr>
                                    <tr class="lstr">
                                        <td>
                                            <p>巧虎新年特别互<br>动秀--北京站</p>
                                        </td>
                                        <td>200.00</td>
                                        <td>2</td>
                                        <td>北京总部</td>
                                        <td>200.00</td>
                                        <td>交易成功</td>
                                        <td></td>
                                    </tr> -->
                                </table>
                            </div>


                            <!-- 制作下方表 -->
                            <!-- <div class="dd-list-bottom">
                                <img src="./images/zuo.jpg" alt="">
                                <span>1</span>
                                <img src="./images/you.jpg" alt="">
                            </div> -->

                        </div>


                        <!-- 个人信息  -->
                        <div class="tab-pane fade " id="gerenxx">
                            <!-- 导航页面 -->
                            <div class="nav-titles ">
                                <div class="nav-title-l tab-nav">
                                    <p class="active">基本资料</p>
                                    <p class="">头像设置</p>
                                    <p class="">兴趣爱好</p>
                                </div>
                                <div class="nav-title-r">
                                    <p>资料完整度：<samp>20%</samp></p>
                                </div>
                            </div>
                            <div class="tab-content1">
                                <!-- 个人信息 基本资料  -->
                                <div class="container-xx">
                                    <!-- 内容页面 -->
                                    <div class="tishi">
                                        完善更多个人信息，有助于我们为您提供更加个性化的服务，大麦网将尊重并保护您的隐私。
                                    </div>
                                    <!-- 表单内容 -->
                                    <div class="tables">
                                        <ul>
                                            <li>
                                                *昵&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称：
                                                <input type="text" name="" class="username1">
                                            </li>
                                            <li>
                                                真实姓名：<input type="text" name="" class="username2">
                                            </li>
                                            <li>
                                                *性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：
                                                <input type="radio" name="sex" id="nan"> <label for="nan">男</label>
                                                <input type="radio" name="sex" id="nv"> <label for="nv">女</label>
                                            </li>
                                            <li>
                                                出生日期：
                                                <select name="" class="nian">
                                                    <option value="">1990</option>
                                                    <option value="">1991</option>
                                                    <option value="">1992</option>
                                                    <option value="">1993</option>
                                                    <option value="">1994</option>
                                                    <option value="" selected>1995</option>
                                                    <option value="">1996</option>
                                                    <option value="">1997</option>
                                                    <option value="">1998</option>
                                                    <option value="">1999</option>
                                                    <option value="">2000</option>
                                                    <option value="">2001</option>
                                                </select>年
                                                <select name="" class="yue">
                                                    <option value="">1</option>
                                                    <option value="">2</option>
                                                    <option value="">3</option>
                                                    <option value="">4</option>
                                                    <option value="">5</option>
                                                    <option value="" selected>6</option>
                                                    <option value="">7</option>
                                                    <option value="">8</option>
                                                    <option value="">9</option>
                                                    <option value="">10</option>
                                                    <option value="">11</option>
                                                    <option value="">12</option>
                                                </select>月
                                                <select name="" class="ri">
                                                    <option value="">1</option>
                                                    <option value="">2</option>
                                                    <option value="">3</option>
                                                    <option value="">4</option>
                                                    <option value="">5</option>
                                                    <option value="" selected>6</option>
                                                    <option value="">7</option>
                                                    <option value="">8</option>
                                                    <option value="">9</option>
                                                    <option value="">10</option>
                                                    <option value="">11</option>
                                                    <option value="">12</option>
                                                </select>日
                                            </li>
                                            <li>
                                                婚姻状况：
                                                <select name="" class="hunyin">
                                                    <option value="">甜蜜</option>
                                                    <option value="">平淡</option>
                                                    <option value="">战争</option>
                                                    <option value="">战后</option>
                                                </select>
                                            </li>
                                            <li>
                                                教育程度：
                                                <select name="" class="jiaoyu">
                                                    <option value="">无知</option>
                                                    <option value="">专科</option>
                                                    <option value="">本科</option>
                                                    <option value="">研究生及以上</option>
                                                </select>
                                            </li>
                                            <li>
                                                从事行业：<input type="text" name="" class="hangye">
                                            </li>
                                            <li>
                                                &nbsp;&nbsp;月&nbsp;收&nbsp;入：
                                                <select name="" class="shouru">
                                                    <option value="">1k~3k</option>
                                                    <option value="">3k~6k</option>
                                                    <option value="">6k~10k</option>
                                                    <option value="">10k以上</option>
                                                </select>
                                            </li>
                                            <li>
                                                &nbsp;家庭住址：
                                                <select id="proviceSelect">
                                                    <option value="-1">请选择省份</option>
                                                    <!-- <option value="">北京市</option> -->
                                                </select>
                                                <select id="citySelect">
                                                    <option value="">请选择城市</option>
                                                </select>
                                                <select id="streetSelect">
                                                    <option value="">请选择街道</option>
                                                </select>
                                            </li>
                                            <li>
                                                现居住地：
                                                <select name="" class="juzhudi">
                                                    <option value="">不限</option>
                                                    <option value="">地球村</option>
                                                </select>
                                                <select name="" class="juzhudi">
                                                    <option value="">不限</option>
                                                    <option value="">火星</option>
                                                </select>
                                            </li>
                                            <li>
                                                身份证号：
                                                <input type="text" name="" class="sfz">
                                            </li>
                                        </ul>
                                    </div>
                                    <button class="sev" id="user-btn">保存</button>
                                </div>

                                <!-- 个人信息 头像设置 -->
                                <div class="head">
                                    <div class="container-tx">
                                        <div class="container-boxlf">
                                            <div class="content1">
                                                <p>请选择一张照片</p>
                                                <button>选择照片</button>
                                            </div>
                                        </div>

                                        <div class="container-boxrt">
                                            <ul>
                                                <li>
                                                    <p class="toutext">头像预览（150*150）</p>
                                                </li>
                                                <li>
                                                    <div class="renxiang"></div>
                                                </li>
                                                <li><button>选择照片</button></li>
                                                <li>
                                                    <p>支持jpg、png图片</p>
                                                </li>
                                                <li><button>保存</button></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>

                                <!-- 个人信息 兴趣偏好 -->
                                <div class="container-like">
                                    <div class="content-like">
                                        <p>兴趣爱好：</p>
                                        <textarea name="" id="" cols="30" rows="10"></textarea>
                                    </div>
                                    <button>保存</button>
                                </div>
                            </div>

                        </div>


                        <!-- 常用购票人 -->
                        <div class="tab-pane fade " id="changyong">
                            <div class="title">
                                常用购票人:李村长，LOOK，辉YYDS，胡老师，付某
                            </div>
                            <div class="dizhi-box">
                                <div class="dizhi-box2">
                                    <a href="" data-toggle="modal" data-target="#myModal"></a>
                                    <p>添加新VIP</p>
                                    <!-- 模态框 -->
                                    <div class="modal fade" id="myModal">
                                        <div class="modal-dialog">
                                            <div class="modal-content">

                                                <div class="modal-body">
                                                    <input type="text" placeholder="姓名">
                                                    <input type="text" placeholder="手机号">
                                                    <select name="" id="" class="select-margin">
                                                        <option value="">省份/自治州</option>
                                                        <option value="">1</option>
                                                        <option value="">1</option>
                                                        <option value="">1</option>
                                                    </select>
                                                    <select name="" id="">
                                                        <option value="">城市/地区</option>
                                                        <option value="">1</option>
                                                        <option value="">1</option>
                                                        <option value="">1</option>
                                                    </select>
                                                    <select name="" id="" class="select-margin">
                                                        <option value="">区/县</option>
                                                        <option value="">1</option>
                                                        <option value="">1</option>
                                                        <option value="">1</option>
                                                    </select>
                                                    <select name="" id="">
                                                        <option value="">配送区域</option>
                                                        <option value="">1</option>
                                                        <option value="">1</option>
                                                        <option value="">1</option>
                                                    </select>

                                                    <input type="text" placeholder="">
                                                    <input type="text" placeholder="邮政编码">
                                                </div>
                                                <!-- 模态框底部 -->
                                                <div class="modal-footer">
                                                    <button type="button" class="modal-button1"
                                                        data-dismiss="modal">保存</button>
                                                    <button type="button" class="modal-button2"
                                                        data-dismiss="modal">取消</button>
                                                </div>



                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="dizhi-txt">
                                    <h3>贾斯汀尼古拉斯赵四</h3>
                                    <p>10086*****666
                                        <br>
                                        符文之地 班德尔城
                                        <br>
                                        倔强黑铁战队 （910000）
                                    </p>
                                </div>
                            </div>


                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>




    <!-- 侧边固定栏 -->

    <!-- 底部 -->
    <footer>
        <div class="top">
            <div class="itm">
                <strong>订购方式 </strong>
                <p>在线订购</p>
                <p>电话订购</p>
                <p>上门订购</p>
                <p>大客户团体订购</p>
                <p>大麦超级票订购</p>
            </div>
            <div class="itm">
                <strong>配送方式</strong>
                <p>送货上门</p>
                <p>电子票</p>
                <p>上门自取</p>
                <p>大麦自助机换票</p>
            </div>
            <div class="itm">
                <strong>支付方式</strong>
                <p>在线支付</p>
                <p>柜台付款</p>
            </div>
            <div class="itm">
                <strong>大麦网微信</strong>
                <img src="../img/img-templet/ewm.png" alt="">
            </div>
            <div class="itm">
                <strong>大麦网触屏版</strong>
                <img src="../img/img-templet/ewm.png" alt="">
            </div>
            <div class="itm">
                <strong>帮助中心</strong>
                <p>找回密码</p>
                <p>账户注册</p>
                <p>账户绑定</p>
                <p>SSL安全证书</p>
            </div>
            <div class="itm">
                <strong>特色服务</strong>
                <p>退换及缺货说明</p>
                <p>发票帮助</p>
                <p>订票服务条款</p>
            </div>
            <div class="itm">
                <strong>退票服务</strong>
                <p>退出订阅</p>
            </div>
        </div>
        <div class="line"></div>
        <div class="bottom">
            <ul>
                <li>公司介绍</li>
                <li>品牌识别</li>
                <li>企业荣誉</li>
                <li>隐私声明</li>
                <li>联系及合作</li>
                <li>招聘信息</li>
                <li>网站地图</li>
                <li>友情链接</li>
                <li class="last">公司大事记</li>
            </ul>
            <div class="bt-imgs">
                <img src="../img/img-templet/btom-1.jpg" alt="">
                <img src="../img/img-templet/btom-2.jpg" alt="">
                <img src="../img/img-templet/btom-3.jpg" alt="">
                <img src="../img/img-templet/btom-4.jpg" alt="">
                <img src="../img/img-templet/btom-5.jpg" alt="">
                <img src="../img/img-templet/btom-6.jpg" alt="">
            </div>
        </div>
    </footer>



    <script src="../js/tab.js"></script>
    <script src="../js/user.js"></script>
    <script src="../js/loginCheck.js"></script>
</body>

</html>